<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="一款可视化采集器,支持各种数据保存方式">
    <meta name="author" content="LarryFranken">
    <title>可视化采集器</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/checkout/">

    

    

<link href="/static/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="checkout.css" rel="stylesheet">
  </head>
  <body class="bg-light">

<button type="button" id="bem1" style="display:none" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#em1">
  编辑
</button>
<div class="modal fade" id="em1" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">编辑</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 在这里添加您要编辑的内容 -->
        <form>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">修改内容</label>
            <input type="email" id="ibem1" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="cbem1" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" id="bbem1" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

<button type="button" id="bem2" style="display:none" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#em2">
  加载配置
</button>
<div class="modal fade" id="em2" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">加载配置</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 在这里添加您要编辑的内容 -->
        <table class="table table-bordered configlist " >
        <tbody>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" id="cbem2" style="display:none" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" id="bbbem2" class="btn btn-primary">新建</button>
        <button type="button" id="bbem2" class="btn btn-primary">选择</button>
      </div>
    </div>
  </div>
</div>
    
<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="/static/image/bootstrap-logo.svg" alt="" width="72" height="57">
      <h2>可视化采集器</h2>
      <p class="lead">The visualization collector is a tool based on request and HTTP, which can effectively crawl data using IO resources urgently. Data can be converted into tables or inserted into databases</p>
    </div>

    <div class="row g-5" >
      <div class="col-md-5 col-lg-4 order-md-last">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-primary">步骤</span>
          <span class="badge bg-primary rounded-pill"></span>
        </h4>
        <ul class="list-group mb-3" style="display:">
          <li did="1" class="tt list-group-item d-flex justify-content-between bg-light">
            <div class="text-primary">
              <h6 class="my-0">采集测试</h6>
              <small class="text-muted">网站连接测试</small>
            </div>
            <span class="text-muted"></span>
          </li>
          <li did="2" class="tt list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">列表页</h6>
              <small class="text-muted">列表页扫描规则与测试</small>
            </div>
            <span class="text-muted"></span>
          </li>
          <li did="3" class="tt list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">文章页</h6>
              <small class="text-muted">文章页扫描规则</small>
            </div>
            <span class="text-muted"></span>
          </li>
          <li did="4" class="tt list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">扫描</h6>
              <small>扫描模式与保存位置</small>
            </div>
          </li>
          <li class="configbtn list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">加载配置</h6>
              <small id="configname">暂无配置</small>
            </div>
          </li>
          <p style="text-align:right;margin-top:1rem"> ---- LarryFranken</p>
        </ul>

        <form class="card p-2" style ="display:none">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Promo code" style ="display:none">
            <button type="submit" class="btn btn-secondary">确定</button>
          </div>
        </form>
      </div>
      <div class="col-md-7 col-lg-8 center" style="padding-bottom:10rem">




        <div class="zz" >
          <div class="row g-3" >
            <div class="col-sm-6 col-md-9">
              <input type="text" class="form-control" id="parseurl" placeholder="网站主页" value="" required>
            </div>
            <div class="col-sm-6 col-md-3">
              <button type="button" style="width:100%" class="btn btn-primary" onclick="parseURLFun()">
                    测试连接
              </button>
            </div>
            <div class="accordion" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    测试连接内容
                  </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    <pre><code id="parseInfo"></code></pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
</div>

<div class="zz" style="display:none">
  <d>
  <div class="toast show align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        双击名称、字段名修改参数
      </div>
      
      <button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
  </d>
  <d>
  <div class="col-12" style="margin-bottom:1rem">
    <label class="form-label" style="margin-top:1rem">采集列表地址 </label>
    <style>
    .ddd input{
      margin-bottom: 0.6rem ;
    }
    </style>
    <ddd class="ddd">
    <input type="text" class="form-control" placeholder="http://baidu.com/?q=1">
    </ddd>
    <button class="btn btn-primary btList" type="button">
      添加列表页url
    </button>  
  </div>
  </d>
  <d>
  <div class="col-12">
    <label class="form-label">列表规则</label>
    <input type="text" id="p2allxpath" class="form-control" placeholder="//div/ul/li">
  </div>
  </d>
<style>
.p2list .form-label{
  margin-top:0.5rem;
}
</style>
  <d class="p2list">
  <div class="col-12">
    <label class="form-label"><d>名称</d><code>name</code></label>
    <input type="text" class="form-control" placeholder="p/text()">
    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" checked disabled class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>
  </div>
  <div class="col-12">
  <label class="form-label"><d>文章链接</d><code>url</code>不可修改</label>
    <input type="text" class="form-control" placeholder="p/text()">
    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" checked disabled class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>
  </div>
  
  <div class="col-12">
    <label class="form-label"><d>作者</d><code>author</code></label>
    <input type="text" class="form-control" placeholder="div[1]/text()">
    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>
  </div>
  <div class="col-12">
    <label class="form-label"><d>分类</d><code>category</code></label>
    <input type="text" class="form-control" placeholder="div[2]/text()">
    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>
  </div>
  <div class="col-12">
    <label class="form-label"><d>描述</d><code>destion</code></label>
    <input type="text" class="form-control" placeholder="div[3]/text()">
    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>
  </div>
  <div class="col-12">
    <label class="form-label"><d>缩略图</d><code>image</code></label>
    <input type="text" class="form-control" placeholder="img/@href">
    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>

  </div>
  </d>
  <div>
    <button style="margin:0.5rem 0 1rem ;" id="a21" class=" btn btn-primary" type="button">
      添加规则
    </button>
    <div class="col-sm-6 col-md-12">
    <button style="margin:1rem 0; width:100%" class="a23 btn btn-primary" type="button">
      保存配置
    </button>
    <button style="margin:1rem 0; width:100%" class="a22 btn btn-primary" type="button">
    数据测试
    </button>
    </div>
            <div class="accordion" id="ae1">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                    数据测试内容
                  </button>
                </h2>
                <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    <pre><code id="p2"></code></pre>
                  </div>
                </div>
              </div>
  </div>
</div>
          <div class="zz" style="display:none">3</div>
          <div class="zz" style="display:none">4</div>


          <div style ="display:none">
          <div class="row g-3" style ="display:">
            
            <div class="col-12">
              <label for="username" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text">@</span>
                <input type="text" class="form-control" id="username" placeholder="Username" required>
              <div class="invalid-feedback">
                  Your username is required.
                </div>
              </div>
            </div>

            <div class="col-12">
              <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="col-12">
              <label for="address" class="form-label">Address</label>
              <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>

            <div class="col-12">
              <label for="address2" class="form-label"></label>
              <input type="text" placeholder="Apartment or suite">
            </div>

            <div class="col-md-5">
              <label for="country" class="form-label">Country</label>
              <select class="form-select" id="country" required>
                <option value="">Choose...</option>
                <option>United States</option>
              </select>
              <div class="invalid-feedback">
                Please select a valid country.
              </div>
            </div>

            <div class="col-md-4">
              <label for="state" class="form-label">State</label>
              <select class="form-select" id="state" required>
                <option value="">Choose...</option>
                <option>California</option>
              </select>
              <div class="invalid-feedback">
                Please provide a valid state.
              </div>
            </div>

            <div class="col-md-3">
              <label for="zip" class="form-label">Zip</label>
              <input type="text" class="form-control" id="zip" placeholder="" required>
              <div class="invalid-feedback">
                Zip code required.
              </div>
            </div>
          </div>

          <hr class="my-4">

          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="cha21">
            <label class="form-check-label" for="cha21"></label>
          </div>

          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="save-info">
            <label class="form-check-label" for="save-info">Save this information for next time</label>
          </div>

          <hr class="my-4">

          <h4 class="mb-3">Payment</h4>

          <div class="my-3">
            <div class="form-check">
              <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
              <label class="form-check-label" for="credit">Credit card</label>
            </div>
            <div class="form-check">
              <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
              <label class="form-check-label" for="debit">Debit card</label>
            </div>
            <div class="form-check">
              <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
              <label class="form-check-label" for="paypal">PayPal</label>
            </div>
          </div>

          <div class="row gy-3">
            <div class="col-md-6">
              <label for="cc-name" class="form-label">Name on card</label>
              <input type="text" class="form-control" id="cc-name" placeholder="" required>
              <small class="text-muted">Full name as displayed on card</small>
              <div class="invalid-feedback">
                Name on card is required
              </div>
            </div>

            <div class="col-md-6">
              <label for="cc-number" class="form-label">Credit card number</label>
              <input type="text" class="form-control" id="cc-number" placeholder="" required>
              <div class="invalid-feedback">
                Credit card number is required
              </div>
            </div>

            <div class="col-md-3">
              <label for="cc-expiration" class="form-label">Expiration</label>
              <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
              <div class="invalid-feedback">
                Expiration date required
              </div>
            </div>

            <div class="col-md-3">
              <label for="cc-cvv" class="form-label">CVV</label>
              <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
              <div class="invalid-feedback">
                Security code required
              </div>
            </div>
          </div>

          <hr class="my-4">

          <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
        </div>





        
      </div>
    </div>
  </main>

</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/static/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/plugin/Pop/plug-in.js"></script>
<script>
// 导航切换
$(document).ready(function() {
  $('.tt').click(function() {
    // 获取当前元素名为did的属性值
    event.stopPropagation();
    var didValue = $(this).attr('did');
    
    $('.tt').removeClass('bg-light').addClass("lh-sm")
    $('.tt').find('div:first').removeClass("text-primary")
    $(this).addClass("bg-light").removeClass("lh-sm")
    $(this).find('div:first').addClass("text-primary")

    $('.zz').css("display","none")
    $('[class="zz"]:eq(' + (didValue - 1) + ')').css("display","block")
  })


  
  // 加载配置点击事件
  $('.configbtn').click(function() {
    $.get("/api/getconfig").done(function(response) {
        response = JSON.parse(response)
        txt = ""
        response.forEach(function (name){
          txt += "<tr><td>"+name+"</td></tr>"
        } )
        $('.configlist tbody').html(txt);

        // 选择配置点击事件
        $('.configlist tr').click(function() {
          $('.configlist tr').removeClass("table-active")
          $(this).addClass("table-active")
        })
    })
    $('#bem2').trigger('click');
  })
  // 选择配置保存事件
  $('#bbem2').click(function() {
    $('.configbtn small').html($('.configlist tr[class="table-active"] td').html())
    $('#cbem2').trigger('click');
  })
  // 添加新配置
  $('#bbbem2').click(function() {
    $.get("/api/addconfig").done(function(response){
      $('.configbtn small').html(response)
      $('#cbem2').trigger('click');
    })
  })
  
  
})

</script>

<script>
// 判断是否为url
function isHttpUrl(url) {
  var httpRegex = /^(http:\/\/|https:\/\/)/;
  return httpRegex.test(url);
}
        // 第一页连接测试
        function parseURLFun() {
            
            // 获取 ID 为 'parseurl' 的 input 元素的值
            var url = $('#parseurl').val();
            $('#parseInfo').html("加载中...")
            // 检查 URL 是否有效
            isValidUrl = isHttpUrl(url)
            if (isValidUrl) {
                // 发送 GET 请求到 URL
              $.post("/api/paseurl", { data:JSON.stringify({url:url})  })
                .done(function(response) {
                  // 请求成功时执行的回调函数
                  $('#parseInfo').html(response);
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                  // 请求失败时执行的回调函数
                  $('#parseInfo').html("响应错误:", textStatus, errorThrown);
                });                
            } else {
                // 如果 URL 无效，显示错误信息
                $('#parseInfo').html("地址有误");
            }
        }
    
</script>
<script>
// 第二页
$(document).ready(function() {
  // 添加采集地址
  $('.btList').click(function() {
    var $myDiv = $('ddd');
    // 创建一个新的input元素
    var $newInput = $('<input>').attr('type', 'text').attr('class', "form-control").attr("placeholder", "http://baidu.com/?q=1");
    // 将新的input元素添加到div的末尾
    $myDiv.append($newInput);
  })
  // 添加规则
  $('#a21').click(function() {
    txt = "<div class='col-12'>"
    txt += '<label class="form-label"><d>规则</d><code>name</code></label>'
    txt += '<input type="text" class="form-control" placeholder="">'
    txt += '    <div class="form-check" style="margin:0.5rem 0 0"><input type="checkbox" class="form-check-input"><label class="form-check-label" for="cha21">允许字段为空</label>    </div>'
    txt += '</div>'

    var newElement = $(txt);
    $('.p2list').append(newElement);    
  })
  // 修改字段方法
  window.globalVar =""
  function aaaa(element) {
    window.globalVar = element
    $('#ibem1').val(element.text());
    $('#em1').show()
    $('#bem1').trigger('click');
  }
  // 修改字段回调
  $('#bbem1').click(function() {
    console.log(1)
    window.globalVar.text($('#ibem1').val())
    $('#cbem1').trigger('click');            
  })
  // 修改字段双击触发
  $('.p2list div label d').dblclick(function() {
      aaaa($(this)); // 调用aaaa方法并
  })
  // 修改字段双击触发
  $('.p2list div label code').dblclick(function() {
      aaaa($(this));
  })
})
// 数据测试
function getcan2() {
  data = {}
  data['urls'] = []
  $('ddd input').each(function(){
    data['urls'].push($(this).val())
  })
  data['allxpath'] = $("#p2allxpath").val()
  data['info'] = {}
  is_error = false
  $('.p2list>div').each(function() {
    tname = $(this).find('label code').text()
    tcname = $(this).find('label d').text()
    txpath = $(this).find('input[type="text"]').val()
    isnull = $(this).find('input[type="checkbox"]').is(':checked')
    data["info"][tname] = {
      name: tname, 
      cname: tcname,    
      xpath: txpath,
      isnull:isnull
    }
    if((tname == "") || (txpath == "") || (tcname =="")){
      //is_error = true
      //$.Pro('请正确配置('+tcname+')的参数')
      //return false
    }
  })
  if(is_error == true){
    return false
  }
  data['config'] = $('.configbtn small').html()
  if(data['config'] == "暂无配置"){
    $.Pro('请选择配置文件')
    return false;
  }
  return data
}
// 保存配置
$('.a23').click(function() {
  data = getcan2()
  if(data == false){return false}
  $.post("/api/setconfig2", { data:JSON.stringify(data)  })
  .done(function(response) {
    $.Pro('保存成功')
  })
})
// 数据测试
$('.a22').click(function() {
  data = getcan2()
  if(data == false){return false}
  $('#p2').html("访问中...\n\n"+JSON.stringify(data,null,2));
  // 发送 GET 请求到 URL
  $.post("/api/listTest", { data:JSON.stringify(data)  })
    .done(function(response) {
      $('#p2').html(response);
      console.log(response)
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      $('#p2').html("响应错误:", textStatus, errorThrown);
    }).setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
})
</script>

  </body>
</html>
